<template>
  <div class="container">
    <!-- 试题预览对话框 -->
    <!-- 弹出层 -->
    <el-dialog
      append-to-body
      title="题目预览"
      :visible="showDialog"
      width="45%"
      @close="close"
    >
      <!-- <div v-if="questionData.questionType"> -->
      <!-- 数据回填{{ questionDetail }} -->
      <el-row>
        <el-col :span="6"
          >【题型】: {{ formatType(questionData.questionType) }}
        </el-col>
        <el-col :span="6">【编号】:{{ questionData.id }} </el-col>
        <el-col :span="6"
          >【难度】:{{ formatDiffculty(questionData.difficulty) }}
        </el-col>
        <el-col :span="6">【标签】:{{ questionData.tags }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】: {{ questionData.subjectName }} </el-col>
        <el-col :span="6">【目录】:{{ questionData.directoryName }} </el-col>
        <el-col :span="6">【方向】:{{ questionData.direction }} </el-col>
      </el-row>
      <hr />
      <el-row>【题干】:</el-row>
      <el-row style="color: #1f1fff" v-html="questionData.question"></el-row>
      <div
        v-if="
          questionData.questionType === '1' || questionData.questionType === '2'
        "
      >
        <el-row>
          {{ formatType(questionData.questionType) }} 选项:
          (以下选中的选项为正确答案)
        </el-row>
        <el-row
          class="lh44"
          v-for="item in questionData.options"
          :key="item.id"
        >
          <!-- 多选 -->
          <el-checkbox
            v-if="questionData.questionType === '2'"
            :value="checkList"
            :label="item.title"
          ></el-checkbox>
          <!-- 单选 -->
          <el-radio v-else :value="radio" :label="item.title">{{
            item.title
          }}</el-radio>
        </el-row>
      </div>
      <hr />
      <!-- 答案预览展示视频的功能 -->
      <el-row>
        <el-col class="lh44" :span="3">【参考答案】: </el-col>
        <el-col class="lh44" :span="21">
          <el-button @click.native="showVideo = true" size="small" type="danger"
            >视频答案预览</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <div v-if="showVideo" style="width: 400px; height: 300px">
          <video
            autoplay="autoplay"
            loop="loop"
            controls="controls"
            muted=""
            style="width: 100%; height: 100%"
            :src="questionData.videoURL"
          ></video>
        </div>
      </el-row>
      <hr />
      <el-row>
        <el-col class="lh44" :span="3">【答案解析】: </el-col>
        <el-col :span="21" v-html="questionData.answer"></el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col class="lh44" :span="3">【题目备注】: </el-col>
        <el-col class="lh44" :span="21">{{ questionData.remarks }}</el-col>
      </el-row>
      <!-- </div> -->

      <!-- 存在bug！=> 弹层一加载会先判断这里，有闪屏的问题 => 通过在父组件调用子组件的方法，用$nextTick保证DOM更新，解决了该bug -->
      <!-- 没获取到文章详情页数据 => 用不着了 -->
      <!-- <div v-else>
        <h1 style="text-align: center">404！ 资源消失了！！</h1>
      </div> -->
      <span slot="footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 用来获取详情页数据-父传子传递过来
    questionDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      // 题目预览页数据
      questionData: {},
      // 控制视频显示隐藏
      showVideo: false
    }
  },
  computed: {
    radio () {
      let aoe = '0'
      this.questionData.options.forEach(item => {
        if (item.isRight === 1) {
          aoe = item.title
        }
      })
      return aoe
    },
    checkList () {
      const aoe = []
      this.questionData.options.forEach(item => {
        if (item.isRight === 1) {
          aoe.push(item.title)
        }
      })
      return aoe
    }
  },
  methods: {
    // 关闭弹层
    close () {
      // 关闭视频显示
      this.showVideo = false
      // 关闭弹层，修改父组件传递过来的布尔值
      this.$emit('update:show-dialog', false)
      // 清空父组件传递的用来获取详情页数据的对象
      this.$emit('update:question-detail', {})
    },
    // 获取问题详情
    async getQuestionsDetail () {
      try {
        const { data } = await detail(this.questionDetail)
        console.log('问题详情弹层数据:', data)
        this.questionData = data
      } catch (error) {
        console.log(error)
      }
    },
    // 映射题型显示
    formatType (type) {
      const map = { 1: '单选题', 2: '多选题', 3: '简答题' }
      return map[type]
    },
    // 映射题目难度
    formatDiffculty (type) {
      const map = { 1: '简单', 2: '一般', 3: '困难' }
      return map[type]
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .el-dialog__footer {
  text-align: right;
}
/*
// 禁用状态下非选中框和文字的样式
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
}

::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266;
  cursor: pointer;
}

// 禁用状态下选中框的文字和样式
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
  cursor: pointer;
}

::v-deep .check .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #409eff;
  cursor: pointer;
}

// 选择框里面对勾的样式
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}

// 禁用状态下单选按钮和文字的样式
::v-deep .el-radio__input.is-disabled .el-radio__inner,
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  border: 1px solid #dcdfe6;
  background-color: #fff;
  color: #606266;
  cursor: pointer;
}

::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  color: #606266;
  cursor: pointer;
}

::v-deep
  [data-v-669342b1]
  .el-radio__input.is-disabled.is-checked
  .el-radio__inner {
  background-color: #409eff;
  border-color: #409eff;
  cursor: pointer;
}

::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #fff;
}
 */
.lh44 {
  line-height: 44px;
}
</style>
